<template>
  <view>
    <scroll-view scroll-y :style="{ maxHeight: `calc(100vh - ${height}px)` }" @scrolltolower="scrollListower">
      <view class="bank-list" v-if="list.length">
        <view class="bank-item" v-for="(item, index) in validList" :key="index" @click="selectBank(item)">
          <view class="bank-item-left">
            <view class="bank-image">
              <image :src="item.pic" mode="scaleToFill" />
            </view>
            <view class="bank-msg">
              <view class="bank-msg-name">{{ item.name }}</view>
              <view class="bank-msg-tel">全国客服热线：{{ item.telephone }}</view>
            </view>
          </view>
          <view class="bank-item-right">
            <uni-icons type="right" size="26"></uni-icons>
          </view>
        </view>
      </view>
      <view v-else>
        <empty></empty>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getBankList } from '@/api/tools.js'
import empty from '../../../components/empty/empty.vue';
export default {
  components: { empty },
  props: {
    height: {
      type: Number,
      default: 0
    },
    selectList: {
      type: Array,
      default: () => []
    }
  },
  // #ifdef MP-WEIXIN
  options: {
    styleIsolation: 'shared' // 解除样式隔离
  },
  // #endif
  data() {
    return {
      where: {
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      total: 0
    }
  },
  computed: {
    validList() {
      const source = this.selectList.length ? this.selectList : this.list;
      return source.filter(item => !!item); // 过滤无效项
    }
  },
  methods: {
    selectBank(v) {
        let params = {
        Um_Key_ButtonName: '银行通讯录' + '-' + v.name,
        Um_Key_SourcePage: '银行通讯录',
      }
      this.$umaTrack.pageClickTrack(params)
      uni.navigateTo({
        url: '/pagesTools/bankDetail/index?id=' + v.id + '&name=' + v.name
      })
    },
    searchListByName(val) {
      this.where.pageNum = 1
      this.list = []
      this.getList(val)
    },
    scrollListower() {
      if (this.where.pageNum * this.where.pageSize < this.total) {
        this.where.pageNum++
        this.getList()
      } else {
        this.$util.Tips('没有更多数据了')
      }
    },
    getList(keyword = '') {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.where.name = keyword
      getBankList(this.where).then(res => {
        this.list = [...this.list, ...res.data.list]
        this.total = res.data.total
      }).finally(() => {
        uni.hideLoading()
      })
    }
  },
  created() {
    // this.getList()
  }
}
</script>

<style lang="scss" scoped>
/deep/ .uni-icons {
  color: #999 !important;
}

.bank-list {
  padding: 30rpx;

  .bank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 20rpx;
    margin-top: 20rpx;
    border-radius: 30rpx;

    .bank-item-left {
      display: flex;

      .bank-image {
        width: 88rpx;
        height: 88rpx;
        margin-right: 20rpx;
        border-radius: 10rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .bank-msg {
        height: 88rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .bank-msg-name {
          font-weight: 500;
          font-size: 32rpx;
          color: #333333
        }

        .bank-msg-tel {
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
        }

      }
    }

    .bank-item-right {}
  }
}
</style>